<template>
  <page-frame >
    <div v-if="prod">
      <!-- banner以及产品名称等 -->
      <el-row class="bg-white pd-all-xl">
        <el-col :span="10" class="pd-rgt-xl">
          <el-carousel height="254px" >
            <el-carousel-item v-for="(banner, index) in prod.banner" :key="index">
              <el-image :src="banner" fit="cover">
                <img class="default-img" slot="error" src="/static/images/common/default/lazyload-img-1.png" alt="">
                <img class="default-img" slot="placeholder" src="/static/images/common/default/lazyload-img-1.png" alt="">
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="14" class="prod-rgt-info">
          <el-row>
            <el-col :span="18" tag="h2">{{prod.name}}</el-col>
            <el-col :span="6" class="c-main">
              <span class="mg-rgt cu-p" @click="checkToDialog('add_prod')"><i class="ucai-icon ucai-icon-fenxiang1"></i>&nbsp;加价转发</span>
              <span class="cu-p" @click="checkToDialog('qr_prod')"><i class="ucai-icon ucai-icon-ico"></i>&nbsp;二维码</span>
            </el-col>
          </el-row>
          <p class="mg-top" v-if="prod.level_name"><span class="c-buy">{{prod.level_name}}</span>{{prod.kind_alias_name || ''}}</p>
          <p class="mg-top"><b>所在地：</b>{{prod.address || prod.zone_name}}<span class="c-main mg-lft cu-p" @click="showMap"><i class="ucai-icon ucai-icon-zuobiao"></i>查看地图</span></p>
          <p class="mg-top" v-if="prod.themes"><b>主题：</b><span class="mg-rgt-sm" v-for="(tag, index) in prod.themes" :key="index">{{tag.name}}</span></p>
          <div class="mg-top-xl">
            <el-button type="primary" @click="$goPage('pc/booking', {product_id: id})">立即采购</el-button>
            <!-- <el-button type="success" @click="addToCart">加入购物车</el-button> -->
            <span class="mg-lft-xl c-main">
              <span class="cu-p" @click="checkToDialog('kefu')"><i class="ucai-icon ucai-icon-kefu"></i>联系客服</span>
              <span 
                class="mg-lft cu-p" 
                :class="isCollected ? 'c-buy' : 'c-main'" 
                @click="collectProd">
                  <i class="ucai-icon" :class="isCollected ? 'ucai-icon-yiguanzhu' : 'ucai-icon-guanzhu'"></i>{{isCollected ? '已' : ''}}收藏
                </span>
            </span>
          </div>
        </el-col>
      </el-row>

      <!-- 产品套餐 -->
      <tabs :list="[{name: '产品套餐', key: '0'}]" class="mg-top" />
      <el-table ref="cateTable" :data="prod.packages" :show-header="false">
        <el-table-column>
          <template slot-scope="scope">
            {{scope.row.name}}
            <p class="c-main cu-p" @click="checkToDialog('cate' ,scope.row)">预定须知<i class="el-icon-arrow-down"></i></p>
          </template>
        </el-table-column>
        <el-table-column width="120">
          <template slot-scope="scope">
            已售{{scope.row.sales > 10000 ? ((scope.row.sales / 10000).toFixed(1) + 'w') : parseFloat(scope.row.sales)}}
          </template>
        </el-table-column>
        <el-table-column width="260">
          <template slot-scope="scope">
            建议零售价：￥{{parseFloat(scope.row.sale_price)}}
            <el-tag class="c-buy" size="mini" hit color="#fff">
              赚￥{{parseFloat( ( parseFloat(scope.row.sale_price) - parseFloat(scope.row.trade_price) ).toFixed(2) )}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope">
            <span class="c-buy">￥<b class="font-lg">{{ parseFloat(scope.row.trade_price) }}</b>起</span>
            <del>￥{{parseFloat(scope.row.origin_price)}}</del>
          </template>
        </el-table-column>
        <el-table-column width="120">
          <template slot-scope="scope">
            <el-button type="primary" @click="$goPage('pc/booking', {product_id: id, package_id: scope.row.id})">立即采购</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 产品详细信息 -->
        <tabs 
          v-model="tabs_active"
          :list="detail_tabs" 
          class="mg-top detail-tabs"
          :class="is_tabs_fixed ? 'fixed' : ''"
          @onChange="tabsChange"
        />
        <div class="bg-white pd-all-xl detail-content">
          <div id="detail_content" v-html="prod.detail.content"></div>
          <div id="detail_instruction">
            <div  v-if="prod.detail.instruction_kind == 0" v-html="prod.detail.instruction"></div>
            <div v-else v-for="(rule, index) in prod.detail.instruction" :key="index">
              <p class="pd-top-xl">【{{rule.name}}】</p>
              <p v-html="rule.content"></p>
            </div>
          </div>
          <div id="detail_explain">
            <div v-for="(rule, index) in prod.detail.use_explain" :key="index">
              <p class="pd-top-xl">【{{rule.name}}】</p>
              <p v-html="rule.content"></p>
            </div>
          </div>
        </div>

      <!-- 相关产品 -->
      <tabs :list="[{name:'景区其他产品', key: 0}]" class="mg-top" v-if="recommendList"/>
      <recommend-item :list="recommendList" v-if="recommendList" />
    </div>

     <!-- 预定须知 -->
    <cate-notic
      :cate="cate"
      ref="dialog_cate"
    />
    <!-- 加价转发 -->
    <add-price
      :prod="prod"
      ref="dialog_price"
    />
    
    <!-- 二维码弹窗 -->
    <qrcode-d :prod="qr_prod" ref="dialog_qrcode" />
    <!-- 客服弹窗 -->
    <kefu :service="service" ref="dialog_kefu" />

  </page-frame>
</template>

<script>
import { 
  Row,
  Col,
  Carousel,
  Button,
  CarouselItem,
  Image,
  Tag,
  Table,
  TableColumn,
  Message
} from 'element-ui'

import Page from '@views_pc/components/frame'
import Tabs from "@cmpt_pc/tab"

import CateNotic from '@views_pc/product/components/cate-notic'
import QrcodeDialog from '@views_pc/product/components/qrcode-dialog'
import AddPrice from '@views_pc/product/components/add-price'
import KefuDialog from '@views_pc/product/components/kefu-dialog'

import RecommendProd from '@views_pc/product/components/recommend-prod'

import {
	getDetail,
	getRecommend,
	addCollectProd,
	delCollectProd
} from '@/api/modules/product'

import { getRolePrice, getRole } from '@utils/role'

const DETAIL_TABS = [{
  key: '1',
  name: '产品信息',
  id: 'detail_content'
},{
  key: '2',
  name: '预订须知',
  id: 'detail_instruction'
},{
  key: '3',
  name: '其他说明',
  id: 'detail_explain'
}]

export default {
  name: 'detail',
  components: {
    [Page.name]: Page,
    [Tabs.name]: Tabs,
    [Row.name]: Row,
    [Col.name]: Col,
    [Carousel.name]: Carousel,
    [CarouselItem.name]: CarouselItem,
    [Button.name]: Button,
    [Image.name]: Image,
    [Tag.name]: Tag,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [CateNotic.name]: CateNotic,
    [QrcodeDialog.name]: QrcodeDialog,
    [AddPrice.name]: AddPrice,
    [RecommendProd.name]: RecommendProd,
    [KefuDialog.name]: KefuDialog,
  },
  data() {
    return {
      id: Number(this.$getUrlParam('id')),
      isVisitorPrice: getRolePrice() === '0', // 是否展示游客价
      secret: this.$getUrlParam('secret'), // 加密字符串
      prod: null,
      cate: {},
      isCollected: false,
      qr_prod: {
        mobile_url: window.location.href,
        qrcode: window.location.href,
      },

      detail_tabs: DETAIL_TABS,
      tabs_active: DETAIL_TABS[0].key,
      is_tabs_fixed: false,//是否吸顶

      service: null,
      recommendList: null,
    }
  },
  created() {
    this.getInfo()
    // 分销商登录时展示推荐
    if(getRole() === '1'){
      this.recommend()
    }
  },
  mounted() {
    window.addEventListener('scroll', this.tabFixed)
  },
  destroyed() {
    window.removeEventListener('scroll')
  },
  methods: {
    getInfo() {
      let data = {id: this.id}
      if(this.isVisitorPrice) data.secret = this.secret
      
      getDetail(data)
      .then(res => {
        this.$set_page_title(res.data.name)
        if(res.data.is_release == 0){ // m版的有个判断，隐藏的就直接弹出然后返回上一页
          alert('产品已下架');
          this.$goPageBack()
          return false
        }
        this.isCollected = res.data.is_favorite == 1
        if(res.data.detail.extra.has_service == 1) {
          this.service = {
            qrcode: res.data.detail.extra.service_name,
            phone: res.data.detail.extra.service_phone
          }
        }
        if(typeof (res.data.detail.use_explain) == 'string'){
          res.data.detail.use_explain = JSON.parse(res.data.detail.use_explain)
        }

        res.data.skus = res.data.packages
        res.data.banner = res.data.detail.picture.product_pic
        
        this.prod = res.data
        this.qr_prod = {
          mobile_url: this.prod.mobile_url,
          qrcode: this.prod.mobile_url
        }

      })
    },
     // 点击各个弹窗
    checkToDialog(type, obj){
      switch(type) {
        case 'cate': 
          this.$refs.dialog_cate.init()
          this.cate = obj
          break
        case 'qr_prod': 
          this.$refs.dialog_qrcode.init()
          break
        case 'add_prod':
          this.add_prod = this.prod
          this.$refs.dialog_price.init()
          break
        case 'kefu': 
        this.$refs.dialog_kefu.init()
      }
    },
    // 收藏
    collectProd() {
      if(this.isCollected) {
        delCollectProd([this.id])
        .then(res => {
          Message('已取消收藏')
          this.isCollected = false
        })
      }else{
        addCollectProd([this.id])
        .then(res => {
          Message('收藏成功')
          this.isCollected = true
        })
      }
    },
    // 地图
    showMap() {
      let url = `https://apis.map.qq.com/uri/v1/search?keyword=${this.prod.name}&center=${this.prod.detail.extra.lat},${this.prod.detail.extra.lng}`
      window.open(url, '_blank')
    },
    // TODO: 待优化的滚动
    tabFixed() {
      let scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
      let content_offsetTop = document.querySelector('#detail_content').offsetTop
      // 吸顶
      this.is_tabs_fixed = scrollTop >= content_offsetTop - 40
      const ind_offsetTop = document.querySelector('#detail_instruction').offsetTop,
            explain = document.querySelector('#detail_explain'),
            explain_offsetTop = explain.offsetTop
      if(scrollTop < ind_offsetTop) {
        this.tabs_active = '1'
      }else if(scrollTop > ind_offsetTop){
        this.tabs_active = '2'
      }else if(scrollTop > explain_offsetTop){
        this.tabs_active = '3'
      }else if(scrollTop > explain_offsetTop + explain.scrollHeight){
        this.is_tabs_fixed = false
      }
        
    },
    // 切换滚动
    tabsChange(index, key, name) {
      const pagex = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
      const element_id = this.detail_tabs.find(item => item.key == key).id
      const  element = document.getElementById(element_id)
      const  top = element.offsetTop - 40
      window.scrollTo(pagex, top)
    },
    // 推荐
    recommend () {
			getRecommend(this.id)
			.then(res => {
				this.recommendList = res.data.list
			})
    },
  }
}
</script>
<style lang="less" scoped>
@import "~@style_pc/basic/utils/index";
.cu-p {
  cursor: pointer;
}
.el-image {
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #f8f8f8;
  img {
    height: 100%;
    .default-img{
      width: auto;
    }
  }
}
.prod-rgt-info {
  .ucai-icon {
    font-size: 14px;
    margin-right: 3px;
  }
  b {
    font-weight: 600;
  }
}
del {
  color: @gray-9;
}
.el-tag.is-hit {
  border-color: @color-buy;
  margin-left: 5px;
}
.detail-tabs {
  &.fixed {
    position: fixed;
    top: 38px;
    left: 210px;
    right: 10px;
    z-index: 111;
  }
}
/deep/.detail-content > div{
  width: 600px;
  margin: 10px 30px ;
  img {
    max-width: 100%;
  }
}
</style>